<template>
  <view class="container">
    <map style="width: 100%; height: 866rpx" :latitude="latitude" :longitude="longitude"></map>
    <view class="paybox">
      <!-- 预估 -->
      <view style="display: flex; align-items: center; justify-content: space-between">
        <view @click="goyugudetail">
          <text style="font-weight: 500; font-size: 26rpx; color: #222222; margin-right: 16rpx">预估</text>
          <text style="font-weight: bold; font-size: 48rpx; color: #222222">{{ forecast }}</text>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">元</text>
          <uni-icons type="right" size="15"></uni-icons>
        </view>
        <radio style="transform: scale(0.7)" color="#3483F6" value="yugu" :checked="yugu" @click="yugu = !yugu" />
      </view>
      <!-- 一口价 -->
      <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 36rpx">
        <view>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222; margin-right: 16rpx">一口价特惠</text>
          <text style="font-weight: bold; font-size: 48rpx; color: #222222">{{ nowprice }}</text>
          <text style="font-weight: 500; font-size: 26rpx; color: #222222">元</text>
        </view>
        <radio style="transform: scale(0.7)" color="#3483F6" :value="!yugu" :checked="!yugu" @click="yugu = !yugu" />
      </view>
      <!-- 给朋友叫车 -->
      <view class="other" @click="goother">
        <text style="margin-right: 10rpx">替朋友叫代驾</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
      <!-- 立即下单 -->
      <view class="orderbtn" @click="$refs.pay.open()">立即下单</view>
    </view>
    <!-- 支付弹框 -->
    <uni-popup ref="pay" type="bottom" border-radius="10px 10px 0 0">
      <view class="box">
        <!-- 标题 -->
        <view class="boxhead">
          <view></view>
          <view>选择支付方式</view>
          <uni-icons type="close" size="20" @click="$refs.pay.close()"></uni-icons>
        </view>
        <!-- 支付金额 -->
        <view style="text-align: center; margin-top: 44rpx">
          <text style="font-weight: 500; font-size: 32rpx; color: #ec0000">￥</text>
          <text style="font-weight: bold; font-size: 48rpx; color: #ec0000">39.00</text>
        </view>
        <!-- 选择支付方式 -->
        <view class="payitem" @click="paystyle = !paystyle">
          <!-- 余额支付 -->
          <view class="item">
            <image src="../../static/images/balance.png" mode="" style="width: 60rpx; height: 60rpx; margin-right: 24rpx"></image>
            <text>余额支付</text>
            <text>（￥1234.56）</text>
          </view>
          <radio style="transform: scale(0.7)" color="#3483F6" :value="paystyle" :checked="paystyle" />
        </view>
        <!-- 微信支付 -->
        <view class="payitem" @click="paystyle = !paystyle">
          <view class="item">
            <image src="../../static/images/weixinapy.png" mode="" style="width: 60rpx; height: 60rpx; margin-right: 24rpx"></image>
            <text>微信支付</text>
          </view>
          <radio style="transform: scale(0.7)" color="#3483F6" :value="paystyle" :checked="!paystyle" />
        </view>
        <view class="paybtn">确定</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      yugu: false, // 预估的单选框
      paystyle: false, // 支付的方式

      latitude: 39.909,
      longitude: 116.39742,
      forecast: 39.9, // 预估价格
      nowprice: 99.0 // 一口价
    };
  },
  methods: {
    // 跳转到预估详情
    goyugudetail() {
      uni.navigateTo({
        url: '/pages/yugudetail/yugudetail'
      });
    },
    // 帮比人叫车
    goother() {
      uni.navigateTo({
        url: '/pages/changeprople/changeprople'
      });
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  box-sizing: border-box;
  .paybox {
    box-sizing: border-box;
    width: 750rpx;
    height: 582rpx;
    background: linear-gradient(179deg, #c5ddff 0%, #ffffff 100%);
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 82rpx 32rpx;
  }
  .other {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 30rpx;
    color: #222222;
    margin: 98rpx 0 36rpx 0;
  }
  .orderbtn {
    width: 654rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    background: #3483f6;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-left: 16rpx;
  }
  .box {
    box-sizing: border-box;
    width: 750rpx;
    height: 706rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 32rpx 54rpx;

    .boxhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .payitem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 42rpx;
      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
    .paybtn {
      width: 654rpx;
      height: 92rpx;
      background: #3483f6;
      line-height: 92rpx;
      text-align: center;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      margin-top: 90rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
}
</style>
